<template>
	<view class="sel-form" @touchmove.stop.prevent="moveHandle"   v-if="show_sel_form == true">
		<view class="mask-show" ></view>
		<view class="iconfont icon-guanbi iconfont-close" @tap="close"></view>
		<view class="shuxian"></view>
		<view class="diy-form">
			<view class="title">添加填表项目</view>
			<view class="change-type">
				<view class="fl type-list" @tap="changeType(1)" :class="type_index == '1'?'type-cative':''">常用</view>
				<view class="fl type-list" @tap="changeType(2)" :class="type_index == '2'?'type-cative':''">其他自定义</view>
			</view>
			<view class="scroll">
				<scroll-view class="scroll-view"  scroll-y="true" >
					<view v-for="(item,index) in showFormData" :key="index" class="item-parent">
						<view v-if="item.dataList.length > 0" class="item-parent-title">{{item.title}}</view>
						<view class="item-child-list flex align-center">
							<view v-for="(c_item,c_index) in item.dataList" :key="c_index"  class="item-child" @tap="selType(index,c_index)">
								<text :class="c_item.icon" :style="{'font-size':(c_item.icon_size?c_item.icon_size:'45rpx')}"></text>
								<text class="" >{{c_item.title}}</text>
							</view>
						</view>
						
					</view>
					<view class="zhanwei"></view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import diyFormData from "@/config/diy_form_data";
	export default {
		name:'sel-form',
		data() {
			return {
				show_sel_form:false,
				type_index:1,
				diyformData:{},
				showFormData:[]
			}
		},
		props:{
			
		},
		methods: {
			selType(index,c_index){
				var info = this.showFormData[index].dataList[c_index];
				console.log(info.type)
				if(info.type == 'username')
				{
					let checkUserNameStatus = true;
					try{
						var parentFormData = this.$parent?JSON.parse(JSON.stringify(this.$parent.formData)):[];
						//console.log(parentFormData)
						for(var i=0;i<parentFormData.length;i++)
						{
							console.log(parentFormData[i])
							if(parentFormData[i].type == 'username')
							{
								checkUserNameStatus = false;
								break;
							}
						}
					}catch(e){
						console.log('错误',e)
					}
					if(checkUserNameStatus == false)
					{
						this.$api.msg('"姓名"项只能选择一次');
						return ;
					}
				}
				this.$emit('selectType',info);
				this.close();
			},
			tggleStatus(status)
			{
				this.show_sel_form = status;
			},
			close(){
				this.show_sel_form = false;
			},
			change(){
				//this.
			},
			changeType(index){
				this.type_index = index;
				if(index == 1)
				{
					var showFormData = diyFormData.useOftenData;
				}else{
					var showFormData = diyFormData.useDiyData; 
					//console.log(typeof diyFormData.useDiyData)
				}
				this.showFormData = showFormData;
			}
		},
		mounted(){
			this.changeType(this.type_index);
		},
	}
</script>

<style lang="scss">
	.sel-form{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 101;
		.iconfont-close{
			position: absolute;
			bottom: 850rpx;
			font-size: 60rpx;
			color: #ffffff;
			z-index: 101;
			right: 40rpx;
		}
		.shuxian{
			width: 2px;
			height: 36rpx;
			background-color: #FFFFFF;
			position: absolute;
			right: 68rpx;
			bottom: 820rpx;
			z-index: 101;
		}
		.diy-form{
			position: absolute;
			left: 0;
			bottom: 0;
			background-color: #FFFFFF;
			height: 820rpx;
			border-radius: 20rpx;
			z-index: 101; 
			width: 100%;
			.scroll{
				height:100%;
				.scroll-view{
					height: 650rpx;
					margin-bottom: 50rpx;
					.item-parent{
						padding: 10rpx 20rpx;
						.item-parent-title{
							width: 100%;
							height: 60rpx;
							line-height:60rpx;
						}
						.item-child-list{
							width: 100%;
							flex-flow: wrap;
							.item-child{
								position: relative;
								width: 31%;
								text-align: left;
								background: #F4F4F4;
								height: 60rpx;
								line-height: 60rpx;
								margin: 10rpx 1% 10rpx 1%;
								border-radius: 10rpx;
								font-size: 26rpx;
								padding-left: 62rpx;
								overflow: hidden;
								.iconfont{
									position: absolute;
									left: 10rpx;
									top: 0px;
								}
							}
						}
					}
				}
			}
			.title{
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				color: #6CA1D0;
				font-size: 30rpx;
				letter-spacing: 2rpx;
			}
			.change-type{
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				.type-cative{
					border-bottom:2rpx solid #6CA1D0 !important;
					color:#6CA1D0;
				}
				.type-list{
					width: 50%;
					border-bottom: 2rpx solid #eee;
					height: 100%;
				}
			}
		}
	}
</style>
